<template>
 <el-main>
   <div id="welcome">
     <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>欢迎</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="15">
        <!-- 左边部分 -->
        <el-col :span="13">
          <!-- 用户信息表格 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>用户信息</span>
               <el-button style="float: right;" size="mini" plain loading type="primary">用户中心</el-button>
                <el-button
                    @click="getPage('https://blog.csdn.net/?spm=1001.2101.3001.4477')"
                     type="primary"
                     plain
                     style="float: right;margin-right: 10px;"
                     size="mini"
                >获取信息</el-button>
            </div>
            <el-tooltip class="item" effect="dark" content="换头像功能还未实现" placement="top-start">
                    <el-avatar
                      shape="square"
                      :size="90"
                      :src="userInfo.avatar"
                      style="float:left;"
                      :key="1"
                    ></el-avatar>
            </el-tooltip>
            <div class="right" style="float:right;width:520px">
              <el-table :data="tableInfo" border height="120">
                <el-table-column prop="username" label="用户账号"></el-table-column>
                   <el-table-column prop="nickname" label="用户昵称"></el-table-column>
                   <el-table-column prop="department" label="所属部门"></el-table-column>
                   <el-table-column fixed="right" prop="roles" label="用户角色" width="150"></el-table-column>
                </el-table>
            </div>
          </el-card>
          <!-- 功能列表 -->
          <el-row style="margin-top:10px;" :gutter="10">
            <el-card style="height:125px;">
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <router-link to="/products">
                      <img
                        src="@/assets/1.svg"
                        alt
                        width="60.8px;"
                        style="margin:0px auto; cursor: pointer;margin-left:20px;"
                      />
                  </router-link>
                  <div style="font-size:12px;margin-top:5px;margin-left:25px;">物资资料</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">
                  <router-link to="/stocks">
                      <img
                        src="@/assets/2.svg"
                        alt
                        width="60.8px;"
                        style="cursor: pointer;margin-left:20px;"
                      />
                  </router-link>
                  <div style="font-size:12px;margin-top:5px;margin-left:25px;">物资库存</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">
                  <router-link to="/inStocks">
                      <img
                        src="@/assets/3.svg"
                        alt
                        width="60.8px;"
                        style="cursor: pointer;margin-left:20px;"
                      />
                  </router-link>
                  <div style="font-size:12px;margin-top:5px;margin-left:25px;">物资入库</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <router-link to="/outStocks">
                      <img
                        src="@/assets/4.svg"
                        alt
                        width="60.8px;"
                        style="cursor: pointer;margin-left:20px;"
                      />
                  </router-link>
                  <div style="font-size:12px;margin-top:5px;margin-left:25px;">物资发放</div>
                </div>
              </el-col>
            </el-card>
          </el-row>
          <el-card class="box-card" style="margin-top:20px;padding:0px;">
            <!-- 用户登入报表 -->
            <div id="loginReport" style="width: 650px;height:270px;"></div>
          </el-card>
        </el-col>
        <!-- 右边部分 -->
        <el-col :span="11">
          <div class="grid-content bg-purple">
            <el-card style="min-height:650px;">
              <el-carousel height="180px">
                <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
              </el-carousel>
              <aplayer
                 style="margin-top:20px;margin-bottom:30px;"
                 autoplay
                 :music="{
                    title: 'Airplanes',
                    artist: 'A-Lin',
                    src: 'http://music.163.com/song/media/outer/url?id=26714821.mp3',
                    pic: 'http://p4.music.126.net/H9HJibEzTL34aIT6nsqKsQ==/5682276092402519.jpg'
                 }"
                  :list="musicList"
              ></aplayer>
                <el-divider>其他项目</el-divider>
                 <el-row :gutter="20">
                            <el-col :span="6"><div class="grid-content bg-purple"><el-button @click="getPage('#')">新冠</el-button></div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple"><el-button @click="getPage('#')">社区</el-button></div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple"><el-button @click="getPage('#')">医院</el-button></div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple"><el-button @click="getPage('#')">公园</el-button></div></el-col>
                 </el-row>
                <el-divider></el-divider>
            </el-card>
             
          </div>
        </el-col>
      </el-row>
      
   </div>
 </el-main>
</template>

<script>
    import echarts from "echarts";
    import aplayer from "vue-aplayer";
export default {
    name:"index",
    components:{
      aplayer:aplayer
    },
    data() {
            return {
                xData: [],
                yData: [],
                myData: [],
                value: new Date(),
                userInfo: {},
                tableInfo: [],
                musicList:[{
                    "artist": "Eminem",
                    "lrc": "",
                    "title": "Airplanes",
                    "src": "http://music.163.com/song/media/outer/url?id=26714821.mp3",
                    "pic": "http://p4.music.126.net/H9HJibEzTL34aIT6nsqKsQ==/5682276092402519.jpg"
                },{
                    "artist": "Tinashe",
                    "lrc": "",
                    "title": "Story of Us",
                    "src": "http://music.163.com/song/media/outer/url?id=1403428061.mp3",
                    "pic": "http://p3.music.126.net/l2XttTpEa14IEZtUsQX1HA==/109951164486978461.jpg"
                }, {
                    "artist": "Chris Brown",
                    "lrc": "",
                    "title": "War For You",
                    "src": "http://music.163.com/song/media/outer/url?id=30431534.mp3",
                    "pic": "http://p3.music.126.net/YWkl1JXVKm7bOBAew72lGg==/109951163958771792.jpg"
                }, {
                    "artist": "Sarah Darling",
                    "lrc": "",
                    "title": "Jack of Hearts",
                    "src": "http://music.163.com/song/media/outer/url?id=19132440.mp3",
                    "pic": "http://p4.music.126.net/4q3kpn5VLo3x7hVWttj0QA==/109951164802108652.jpg"
                }, {
                    "artist": "Benjamin Ingrosso",
                    "lrc": "",
                    "title": "Costa Rica",
                    "src": "http://music.163.com/song/media/outer/url?id=1372897252.mp3",
                    "pic": "http://p4.music.126.net/mmm97zC81t73rToPFuXXnw==/109951164159882466.jpg"
                }, {
                    "artist": "Yo Trane",
                    "lrc": "",
                    "title": "Affection",
                    "src": "http://music.163.com/song/media/outer/url?id=1393553542.mp3",
                    "pic": "http://p4.music.126.net/T_vdbfQPO4HE4zVE_8rgCQ==/109951164389023010.jpg"
                }]
            };
        },
        methods:{
          getPage(url) {
                const w = window.open("about:blank");
                w.location.href = url;
            },
            async loginReport(username) {
                const { data: res } = await this.$http.post("loginLog/loginReport", {
                    username: username
                });
                if (res.code !== 200) {
                    return this.$message.error("获取登入报表数据失败:" + res.msg);
                } else {
                    var $this = this;
                    this.xData = [];
                    this.yData = [];
                    this.myData = [];
                    res.data.all.forEach(e1 => {
                        $this.xData.push(e1.days);
                        $this.yData.push(e1.count);
                    });

                    for (var i = 0; i < this.xData.length; i++) {
                        var count = 0;
                        for (var j = 0; j < res.data.me.length; j++) {
                            if ($this.xData[i] === res.data.me[j].days) {
                                count = res.data.me[j].count;
                                break;
                            } else {
                                count = 0;
                            }
                        }
                        $this.myData.push(count);
                    }
                }
                this.draw();
            },

          //  绘制登入报表
            draw() {
                var myChart = echarts.init(document.getElementById("loginReport"));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: "用户登入统计"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: "none"
                            },
                            dataView: { readOnly: false }, //  缩放
                            magicType: { type: ["bar", "line"] }, ///　　折线  直方图切换
                            restore: {}, // 重置
                            saveAsImage: {} // 导出图片
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#eee'
                            }
                        }
                    },
                    legend: {
                        type:'plain',
                        data: ["全部", "我"]
                    },
                    xAxis: {
                        data: this.xData
                    },
                    yAxis: {
                        type: "value"
                    },
                    series: [
                        {
                            name: "全部",
                            data: this.yData,
                            type: "bar",
                            showBackground: true,
                            animationDuration: 1500,
                            animationEasing: "cubicInOut",
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(30, 144, 255，0.5)'
                            },
                        },
                        {
                            name: "我",
                            data: this.myData,
                            type: "bar",
                            showBackground: true,
                            animationDuration: 2000,
                            animationEasing: "cubicInOut"
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        },

        created() {
            this.userInfo = this.$store.state.userInfo;
            var roles = this.userInfo.isAdmin ? "超级管理员" : this.userInfo.roles;
            this.tableInfo.push({
                username: this.userInfo.username,
                nickname: this.userInfo.nickname,
                department: this.userInfo.department,
                roles: roles
            });
            // this.loadMusicList();
        },
        mounted: function() {
            this.loginReport(this.userInfo.username);
            this.draw();
        },

    };
        

</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
        background-image: url("http://myforum.oss-cn-beijing.aliyuncs.com/postImages/1582867606734617c9668-8086-4c9b-867e-efda0bff78d63.png?Expires=1677475607&OSSAccessKeyId=LTAI4FsV5R1tnt8W8kqFqBYh&Signature=3xKM18EXDDD%2BQmsg%2B0t7uDC%2FMGg%3D");
        background-size: 100% 100%;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
        background-image: url("http://myforum.oss-cn-beijing.aliyuncs.com/postImages/15828676585536f809b01-a5c3-4229-8ce6-ed29a7bdaaa22.png?Expires=1677475658&OSSAccessKeyId=LTAI4FsV5R1tnt8W8kqFqBYh&Signature=k2fJfFzwKwp7f2c%2BRD7rdH%2FAj%2Bs%3D");
        background-size: 100% 100%;
    }
</style>

